<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title>Circles</title>
    
    <!-- Bootstrap core CSS -->
    <link href="/resources/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="/resources/js/html5shiv.js"></script>
      <script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <link href='http://fonts.googleapis.com/css?family=Alef' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/resources/css/font-awesome.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css">
    <style type="text/css">
    	body { 
			padding-top: 80px;
			padding-bottom: 70px;
			background-color:#E9EAED;
		}
		
		.commonFont{
    		font-family: 'Nanum Gothic', sans-serif;
    	}
    	#leftMenu li a:hover,
    	#leftMenu li a:focus{
    		background-color:#EEEEEE;
    	}
    	#leftMenu .active a,
    	#leftMenu .active a:hover,
    	#leftMenu .active a:focus{
    		outline: 0;
    		background-color:#428BCA;
    		color:#ffffff;
    	}
    	
    	#leftMenu li a{
    		text-decoration:none;
    		text-align:left;
    		display: block;
    		padding:10px 0;
    		padding-left:15px;
    	}
    	
    	.active,
    	.active a,
    	.active a *{
    		background-color:#428BCA;
    		color:#ffffff !important;
    	}
    	.shText {
    		color: white;
			text-shadow: #444 0 1px 1px;
			background:transparent;
		}
		.card{
			background: white;
			box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1), -1px 1px 0 rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.1);
			border-radius: 3px;
			padding-top: 5px;
			padding-bottom: 5px;
  		}
  		.coverImage{
  			margin:0;
  			padding:0;
  			background:url("/resources/img/cover-image/sample/${groupDto.cover_image}") no-repeat;
    		-webkit-background-size: cover;
		  	-moz-background-size: cover;
		  	-o-background-size: cover;
		 	background-size: cover;
    		min-height:240px;
    		border-radius: 2px;
    		box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1), -1px 1px 0 rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.1);
  		}
  		
  		.arrow_box {
  			width:100%;
  			padding:5px;
			background: white;
			border: 1px solid #B6B6B6;
			border-bottom: 1px solid #B6B6B6;
			-moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
			-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
			box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
			position: relative;

		}
		.arrow_box:after, .arrow_box:before {
			bottom: 100%;
			left: 4%;
			border: solid transparent;
			content: " ";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
		}
		
		.arrow_box:after {
			border-color: rgba(255, 255, 255, 0);
			border-bottom-color: #ffffff;
			border-width: 12px;
			margin-left: -12px;
		}
		.arrow_box:before {
			border-color: rgba(245, 0, 0, 0);
			border-bottom-color: #B6B6B6;
			border-width: 13px;
			margin-left: -13px;
		}
		#writeLayout ul li a i{
			font-size:1.5em;
		}
		#writeLayout ul li a{
			color:#A2A2A2;
		}
		#writeLayout ul li{
			margin-right:15px;
			text-align:center;
		}
		
		#letterFunction a:hover{
			text-decoration: none;
			color:#000000;
		}
		#letterFunction a{
			color:#595959;
		}
    </style>
	<script src="/resources/js/jquery-1.11.0.js"></script>
    <script type="text/javascript">
	    var access = '${groupDto.access}';
	    var groupName = '${groupDto.name}';
	    var groupId = '${groupDto.id}';
	    
	  	function resize(obj) {
	  		obj.style.height = "70px";
	  		obj.style.height = (obj.scrollHeight)+"px";
	  	}
	  	function joinGroup(){
	  		$.ajax({
 			    type : "get"
 			    , url : "/joinGroup?groupId="+groupId
 			    , dataType : "text"
 			    , timeout : 5000
 			    , error : function(request, status, error) {
 			    	alert("서버문제로 지금은 가입할 수 없습니다");
 			    }
 			    , success : function(response) {
 			    	if(response == "wait"){
 			    		$("#joinGroupBtn").html("가입요청됨").attr("disabled","disabled");
 			    	}
 			    }
 			    , beforeSend: function() {
 			    	
 			    }
 			    , complete: function() {
 			    	
 			    }
 			});
	  	}
	  	
    	$(document).ready(function(){
    		$(".arrow_box textarea").click(function(){
    			$("#letterFunction").show(300);
    		});
    		
    		$("body").click(function(e){
    			if(!$(e.target).is(".arrow_box *")){
    				$("#letterFunction").hide(300);
    			}
    		});
    		
    		/* $("#privacy").find("li").each(function(){
    			if($(this).attr("class") == "select"){
    				$(this).children().find("i:first").addClass("glyphicon glyphicon-ok");
    			}
    		}); */
    		
    		$("#privacy li a").on("click", function(){
    			$("#privacyState").html(" "+$(this).text().trim());
    			$("#privacyStateIcon").removeClass().addClass($(this).find("i:last").attr("class"));
    			
    			$(this).parent().parent().find("li").each(function(){
    				$(this).children().find("i:first").removeClass();
    			});
    			$(this).find("i:first").addClass("glyphicon glyphicon-ok");
    		});
    		
    		if(access == 1){
    	  		$("#displayAccess").html("매니저에게 가입요청해서 그룹에 참여해 보세요");
    	  	}else if(access == 2){
    	  		$("#displayAccess").html(groupName+"그룹은 공개그룹입니다 지금 바로 가입해서 소식을 공유해 보세요");
    	  	}
    	}); // end document
    </script>
</head>

<body>
	<!-- Fixed navbar -->
		<jsp:include page = "head.jsp" flush="false"/>
	<!-- Fixed navbar -->

	<div class="container">
   		<div class="row" style="margin-left:30px; padding:0;">
	   		<!-- 좌측레이아웃 -->
	   		<div class="col-md-3 hidden-xs commonFont" style="margin:0; padding:0;">
	   			<div class="card" style="padding:0;">
		   			<ul class="list-unstyled" id="leftMenu" style="padding:20px 0 20px 0; margin:0;">
		   				<li class="active"><a href="#account" title="새소식"><i class="glyphicon glyphicon-list-alt"></i>&nbsp;새소식</a></li>
		   				<li><a href="#privacy" title="앨범"><i class="glyphicon glyphicon-picture" style="color:#3B5998"></i>&nbsp;앨범</a></li>
		   				<li><a href="#group" title="스케줄"><i class="glyphicon glyphicon-calendar" style="color:#307830"></i>&nbsp;스케줄</a></li>
		   				<li><a href="#notifications" title="투표"><i class="glyphicon glyphicon-list-alt" style="color:#FF8000"></i>&nbsp;설문</a></li>
		   				<li><a href="#invite" title="가계부"><i class="glyphicon glyphicon-usd" style="color:#808000;"></i>&nbsp;가계부</a></li>
		   			</ul>
	   			</div>
	   			<!-- 사진 -->
		   		<div class="card" style="margin-top:10px; min-height:200px;">
		   			<div style="padding:16px 15px 0 15px;">
		   				<p class="pull-left"><span class="h4">사진</span><small>  0개</small></p>
		   				<p class="pull-right"><span class="h4"><a href="#" title="더보기"><i class="fa fa-chevron-right" style="color:#656565;"></i></a></span></p>
		   			</div>
		   		</div>
		   		<!-- 사진 -->
	   			<!-- 멤버 -->
		   		<div class="card" style="margin-top:10px;">
		   			<div style="padding:16px 15px 0 15px;">
		   				<div class="pull-left"><span class="h4">멤버</span><small>  ${memberCount}명</small></div>
		   				<div class="pull-right"><span class="h4"><a href="#" title="더보기"><i class="fa fa-chevron-right" style="color:#656565;"></i></a></span></div>
		   			</div>
		   			<div style="clear:both; padding:10px 15px 15px 15px;">
		   				<c:forEach var="dto" items="${memberDto}">
		   					<c:if test="${empty dto.profileImage}">
		   						<img src="/resources/img/default_profile_pic.png" title="${dto.name}" width="45px;" height="45px;">
		   					</c:if>
		   					<c:if test="${!empty dto.profileImage}">
		   						<img src="/profileImageViewer/${dto.num}" title="${dto.name}" width="45px;" height="45px;">
		   					</c:if>
		   				</c:forEach>
		   			</div>
		   		</div>
		   		<!-- 멤버 -->
	   		</div>
	   		<!-- 좌측레이아웃 -->
	   		
	   		<!-- 우측레이아웃 -->
	   		<div class="col-md-7 hidden-xs" style="margin:0 0 0 15px; padding:0;">
	   			<!-- 그룹 커버 이미지 -->
	   			<div class="commonFont coverImage">
	   				<div style="padding-top:30px; padding-left:15px;position:relative;">
						<h1 class="shText">${groupDto.name}</h1>
						<small class="shText">25명 구성원</small>
						<%-- <c:if test="${checkSignup == 0}">
							<p style="padding-top:8px;"><a class="btn btn-success">가입하기</a></p>
						</c:if> --%>
					</div>
				</div>
				<!-- 그룹 커버 이미지 -->
		   		<c:if test="${checkSignup != 0}">
		   		<!-- 글쓰기 -->
		   		<div class="commonFont card" style="background-color:#F5F5F5;padding:15px; margin-top:10px;">
		   			<div style="padding:0 0 0 15px;" id="writeLayout">
						<ul class="list-inline" style="padding: 0 0 5px 0; margin:0 0 10px 0;">
							<li><a href="#"><i class="glyphicon glyphicon-pencil" style="color:#53A93F!important;"></i><br>글</a></li>
							<li><a href="#"><i class="glyphicon glyphicon-camera"></i><br>사진</a></li>
							<li><a href="#"><i class="glyphicon glyphicon-facetime-video"></i><br>동영상</a></li>
							<li><a href="#"><i class="glyphicon glyphicon-list-alt"></i><br>투표</a></li>
						</ul>
					</div>
					<div class="arrow_box">
						<div><textarea style="border:0;width:100%;padding:10px;" rows="2" placeholder="새로운 소식을 공유하세요" onkeyup="resize(this)"></textarea></div>
							<div id="letterFunction" style="display:none;padding:5px; height:55px;">
								<hr style="margin:0 0 10px 0; padding:0;">
								<div style="float:left; padding-top:5px;">
									<a href="#"><i class="fa fa-camera" style="color:#4285F4;"></i> 사진</a>
									<a href="#"><i class="glyphicon glyphicon-link" style="color:#FF8000;"></i> 링크</a>
									<a href="#"><i class="fa fa-youtube-play" style="color:#D73D32;"></i> 동영상</a>
									<a href="#"><i class="glyphicon glyphicon-map-marker" style="color:#808000;"></i> 장소</a>
								</div>
								<div style="float:right;">
									<div class="btn-group">
										<ul class="nav nav-pills">
											<li class="dropdown">
												<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-group" id="privacyStateIcon"></i><span id="privacyState">&nbsp;그룹공개</span><span class="caret"></span></a>
												<ul class="dropdown-menu" style="min-width:0;" id="privacy">
													<li><a href="#"><i style="color:#53A93F;">&nbsp;</i><i class="fa fa-globe"></i> 전체공개</a></li>
													<li class="select"><a href="#"><i style="color:#53A93F;" class="glyphicon glyphicon-ok">&nbsp;</i><i class="fa fa-group"></i> 그룹공개</a></li>
													<li><a href="#"><i style="color:#53A93F;">&nbsp;</i><i class="glyphicon glyphicon-lock"></i> 비공개</a></li>
													<li><a href="#"><i style="color:#53A93F;">&nbsp;</i><i class="glyphicon glyphicon-user"></i> 사용자지정</a></li>
												</ul>
											</li>
										</ul>
									</div>
									<button type="button" class="btn btn-success">&nbsp;공유하기&nbsp;</button>
								</div>
							</div>
					</div>
		   		</div>
		   		</c:if>
	   			<!-- 글쓰기 -->
	   			<!-- 가입안내 -->
		   		<c:if test="${checkSignup == 0}">
		   		<div class="commonFont card" style="padding:15px;">
		   			<h4 id="displayAccess"></h4><br>
		   			<c:if test="${groupDto.access == 1}">
		   				<button type="button" class="btn btn-success" title="가입요청" onclick="joinGroup()" id="joinGroupBtn"><i class="glyphicon glyphicon-check"></i>&nbsp;가입요청</button>
		   			</c:if>
		   			<c:if test="${groupDto.access == 2}">
		   				<button type="button" class="btn btn-success" title="가입하기" onclick="joinGroup()" id="joinGroupBtn"><i class="glyphicon glyphicon-ok-sign"></i>&nbsp;가입하기</button>
		   			</c:if>
		   		</div>
		   		</c:if>
		   		<!-- 가입안내 -->
		   	</div> <!-- 우측레이아웃 -->
   		</div> <!-- end row -->
   	</div> <!-- end container -->
	
	<!-- footer -->
	<div class="hidden-xs">
		<jsp:include page = "footer.jsp" flush="false"/>
	</div>
	<!-- footer -->
	
	<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->  
    <script src="/resources/js/bootstrap.js"></script>
</body>
</html>